<style rel="styleesheet" lang="less">
@media screen and (min-width: 829px) {
  #searchCom {
    float: right;
    margin-top: 3.5rem;
    margin-bottom: 1rem;
    height: 2.43rem;
    position: relative;
    .searchBox {
      float: right;
      width: 20.71rem;
      height: 2.43rem;
      background: rgba(255, 255, 255, 1);
      border: 1px solid #CCCCCC;
      border-radius: 1.14rem;
      padding-left: 15px;
    }
    .searchLogo {
      font-size: 1.5rem;
      cursor: pointer;
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
    }
    .reduction{display: none}
    .searchSure{display: none}
  }
}

@media screen and (max-width: 829px) {
  #searchCom {
    position: relative;
    float: right;
    background-color: #FFFFFF;
    height: 1.05rem;
    line-height: 1.05rem;
    text-align: center;
    width: 17%;
    .search-box{
      height: 100%;
      transition:all 0.5s;
      position: absolute;
      width: 100%;
      right: 0;
      top: 0;
      overflow: hidden
    }
    .searchBox{
      display: none
    }
    .searchLogo{
      display: inline-block;
      height: 100%;
      width: 100%;
    }
    .icon-search {
      font-size: 0.5rem;
    }
  }
  #searchCom.show-search {
    .reduction {
      display: inline-block;
    }
    .search-box {
      width:100vw;
      background-color: #fff;
    }
    .reduction {
      float:left;
      width: 12%;
    }
    .searchBox {
      background-color: #eee;
      border-radius: 0.08rem;
      display: inline-block;
      width: 76%;
      font-size: 0.28rem;
      height: 0.7rem;
      padding:0.1rem 0.3rem;
      margin-top: 0.175rem;
      float:left;
    }
    .searchLogo{
      width: 12%;
      float:left;
    }
    .icon-search{display: none}
  }
}

</style>
<template>
  <div id="searchCom" class="search" :class="[showSearch?'show-search':'']" >
    <div class="search-box">
      <span class="reduction" @click="setSearch(false)" v-show="showSearch" >返回</span>
      <input type="text" v-model="searchData" class="searchBox">
      <span class="icon-search searchLogo" @click="setSearch(true)"></span>
      <span class="searchLogo searchSure" v-show="showSearch">确定</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showSearch: false,
      searchData: ''
    }
  },
  methods: {

  },
}

</script>
